<%@page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="include2.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>聪聪工作室</title>
<script src="js/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
</head>
<body>
	<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
	<script language="JavaScript">
		$(document)
				.ready(
						function() {
							var title = {
								text : '能耗总量'
							};
							var subtitle = {
								text : ''
							};
							var xAxis = {
								categories : [ 'Jan', 'Feb', 'Mar', 'Apr',
										'May', 'Jun', 'Jul', 'Aug', 'Sep',
										'Oct', 'Nov', 'Dec' ]
							};
							var yAxis = {
								title : {
									text : '消耗量'
								},
								plotLines : [ {
									value : 0,
									width : 1,
									color : '#808080'
								} ]
							};

							var tooltip = {
								valueSuffix : ''
							}

							var legend = {
								layout : 'vertical',
								align : 'right',
								verticalAlign : 'middle',
								borderWidth : 0
							};

							var series = [
									{
										name : '实际值',
										data : [ <%=sum1%>, <%=sum2%>, <%=sum3%>, <%=sum4%>, <%=sum5%>,
										         <%=sum6%>, <%=sum7%>, <%=sum8%>, <%=sum9%>, <%=sum10%>,
										         <%=sum11%>, <%=sum12%> ]
									},
									{
										name : '预算值',
										data : [ <%=pre1%>, <%=pre2%>, <%=pre3%>, <%=pre4%>, <%=pre5%>,
										         <%=pre6%>, <%=pre7%>, <%=pre8%>, <%=pre9%>, <%=pre10%>,
										         <%=pre11%>, <%=pre12%> ]
									}

							];

							var json = {};

							json.title = title;
							json.subtitle = subtitle;
							json.xAxis = xAxis;
							json.yAxis = yAxis;
							json.tooltip = tooltip;
							json.legend = legend;
							json.series = series;

							$('#container').highcharts(json);
						});
	</script>
</body>
</html>
